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Objectives — 
æ Plan graphics use 
> Insert graphics 
> Specify graphic size 

> Link graphics 

> Insert an image map 

> Add a background image 
> Explore multimedia options 


Text is often the most important part of a Web page, as it conveys the infor- 
mation that serves as the page’s focus. Nevertheless, as in print media, 
graphics are also an important part of Web design. In addition to sometimes 
conveying information better than text, graphics can make a page easier to 
read, and play an integral part in giving a page a unique style and mood. 
Recent trends in graphics for the Web involve supplementing visuals with 
sound and animation. $f» Grace Dekmejian works in the Information 
Systems department at Nomad Ltd, a travel and sporting goods company. 
Along with her co-workers, Grace is creating a company Web site. To 
strengthen the layout and tone of the Web site, Grace wants to add Nomad’s 
logo and other graphic images to the pages she is developing. She’s also 
interested in learning more about incorporating sound and animation into 
the Web pages. 


Planning 
aM | Graphics Use 


The use of graphics is a popular and practical way to enrich Web pages, and an important part 
of virtually all pages on the Web today. As with other design tools, moderation is the key to effec- 
tive graphics use. A Web page filled with text but devoid of graphics can be uninviting and dif- 
ficult for users to read. On the other hand, a Web page with too much space devoted to graphics 
can overwhelm and distract users from the focus of the page. To implement graphics most 
effectively, first clarify the goal of your Web page or Web site. Then, plan and incorporate 
limited graphics that support your layout without overwhelming it. Figure C-1 shows a Web 
page that balances text with limited graphics. Grace plans to incorporate the Nomad 
Ltd company logo into the Web site she is creating. She also wants to add two small graph- 
ics that contribute to the page’s outdoor theme. While planning the use of graphics, it’s 
important to keep a few guidelines in mind: 


Use supported file formats 


You usually can tell the Unlike Web page text, which is actually a part of the HTML document that creates a Web page, 
format of a file by Web page graphics are separate files that are referenced in a page’s HTML code. Many graphic 
checking the filename's file formats exist, but only three are widely supported by Web browsers: GIF, JPG, and PNG. 
three-character Table C-1 gives more information about each of these three formats. As you create or acquire 
extension. For example, graphics for your Web site, make sure they are GIF, JPG, or PNG files. When Grace requests 


the name of a JPG file 


; : i fies th 
usualivendewith Jae graphic files from Nomad Ltd’s marketing and graphic design departments, she specifies that 


they need to be in one of the three Web-compatible formats. 


A Add alternate text 


Images are a central part of the Web today, and are almost universally supported by browsers. 
Even so, users may be unable to view a Web page’s images because of a faulty Web connection 
or a visual impairment. Or, they may choose not to view the images in order to speed up Web 
page download times. To accommodate these users, its important that Web pages convey the 
same information with or without the images. The HTML tag for adding an image to a Web 
page also supports an attribute that allows you to specify alternate text, which appears when a 
graphic does not. While planning how she will incorporate graphics into her layout, Grace con- 
siders the alternate text that would be most appropriate for each. 


A Use graphics judiciously 

i If a few graphics can make a Web page more interesting, then can a lot of graphics make a Web 
page super-interesting? The answer is “usually not.” Extra graphics actually are counterproduc- 
tive, and make a Web page difficult to understand and use. The most reliable way to effectively 
incorporate graphics into your Web pages is to use limited graphics to support a page’s struc- 
ture and function, rather than add graphics for their own sake. Grace plans to add only three 
graphics to the Nomad Ltd home page. The logo will connect the page with the company’s 
established identity, and the other two graphics will build on the Web page’s outdoor theme. 


TABLE C-1: Web-compatible graphic formats 


format | best for | notes 
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FIGURE C-1: Web page enhanced with graphics 


Images inserted 
into page 


¢ sporting gear 
+ adventure travel 
e about Nomad Ltd 


i destinations: 


Outside Looking Out 


Shop online to get from your desk to the outdoors without wasting time. 


Need Ideas? Our most popular U.S. 


1. Sequoia National Park, California Park 
2. Grand Teton Mountains, Wyoming 


Subtle image 
used as page 
background 


© Get the tickets, get the gear, and get out there. 


Grand Teton 
Mountains 


Image map 
offers multiple 
visual links 


Appalachian Trail 


3. Appalachian Trail, East coast 


A Web page’s download time is an important 

~ usability factor in which the size of graphics plays a 
large role. Download time is the amount of time it 
takes for the page and its associated files to transfer 
from their location on the Web to a user’s browser. 
HTML files alone are relatively small, and most 
download within a few seconds, even over the slowest 
Internet connection. Graphic files, however, tend to 
be much larger, and take much longer to download. 
Download time is another reason to minimize the 
number and size of graphics on your Web pages; 
more graphics mean that users must wait longer to 
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The clearest way into the Universe is through a forest wilderness. 


Minimizing Web page download times 


see and use a page. New technologies—known as 
broadband technologies—that allow faster 
downloads are becoming more widespread. 
Universities and many large corporations also have 
Web connections that enable near-instantaneous 
downloads. However, remember that in many parts of 
the United States and the world, such technology is 
not available or prevalent; this means that on the Web 
as a whole, slower connections are the rule, not the 
exception. By adhering to sound graphics design 
principles, you can ensure that your Web pages are 
easily viewable over all types of Internet connections. 


C) Inserting Graphics 


HTML uses the <IMG> tag to incorporate images into a Web page. The <IMG> tag is unpaired; it 
HTML requires no closing tag. However, like the opening tag for a link, the <IMG> tag always requires an 
attribute. This attribute, SRC, indicates the name and location of the graphic file. The <IMG> tag 
also supports many other attributes, several of which are explained in Table C-2. @fipæ» Grace 
wants to add the Nomad Ltd logo graphic to the company’s Web page. 
1. Start your text editor program, open the file HTM C-1.htm, then save it as a text doc- 
ument with the filename nomad-c.htm 


2. Select the text <H1>Nomad Ltd</H1> near the top of the document, then press 
[Delete] 


3. Type <IMG SRC="images/nomad.gif" ALIGN="left"> 
Grace replaced the page heading code containing the company name with the <IMG> tag 
referencing the logo graphic. To keep the files for the Nomad Web site organized, Grace cre- 
ated a folder called “images” where she stores the site’s graphic files. Therefore, she specified 
the folder “images” along with the graphic’s filename, “nomad.gif,’ in the SRC attribute. 
Although images are aligned at the left margin by default, specifying “left” with the ALIGN 
attribute ensures that the text following the graphic runs alongside, rather than below it. 


4. Move the insertion point to the end of the line that begins with “<H2>”, press 


[Enter] twice, then type <IMG SRC="images/tree.jpg" ALIGN="left"> 
The <IMG> tag adds an outdoor photo to the Web page. 


5. Save your work, start your Web browser, cancel any dial-up activities, then open the 
Some versions of Internet file nomad-c.htm 
Explorer do not correctly The Nomad Ltd logo graphic appears in the upper-left corner of the browser window, and 
display bulleted and the graphic of the tree runs near or along the left edge. Grace wants to clean up the layout 
numbered lists adjacent to 


around the graphics. 


6. Click the text editor program button on the taskbar, move the insertion point to the 
beginning of the line that starts with “<H2>”, type <BR>, then press [Enter] 
Adding a line break before the remaining heading creates more space above it. 

7. Click between the 2 and the > in the <H2> tag below the <BR> you just entered, 
press [Spacebar], then type ALIGN="center" 

Figure C-2 shows the completed code for the <IMG> tags and surrounding text. 

8. Save your work, click the browser program button on the taskbar, then reload 
nomad-c.htm 
The heading “Outside Looking Out” is now separated from the logo. See Figure C-3. 


9. Click the text editor program button on the taskbar 


a graphic. 


FIGURE C-2: Web page code containing <IMG> tag 


Code to insert Nomad, |<Bopy> 
Ltd logo graphic <FONT FACE="arial, helvetica, sans serif™> 


<IMG SRC="“images/nomad.gif" ALIGN="left"> 
Code for extra space N 

above heading BR> : ; 
KH2 ALIGN: "center"><FONT COLOR="#238E68">Outside Looking 
KEM>Out</EM></FONT></H2> 

Code to insert 


outdoor photo ~~m SRC="images/tree. jpg” ALIGN="left"> 


Shop online to get from your desk to the outdoors without wasting time. 
<BR><BR> 


FIGURE C-3: Web page incorporating logo and photo 


ae — Nomad, Ltd Outside Looking Out 


graphic 
inserted Shop online to get from your desk to the outdoors without wasting time. Heading 
Get the tickets, get the gear, and get out there. moved down 
one line and 
e sporting gear center- 
¢ adventure travel aligned 
outdo ¢ about Nomad Ltd 
photo Need Ideas? Our most popular U.S. destinations: 
inserted 


1. Sequoia National Park, California 
2. Grand Teton Mountains, Wyoming 
3. Appalachian Trail, East coast 


The clearest way into the Universe is through a forest wilderness. 
-John Muir 


TABLE C-2: Commonly used IMG attributes 


attribute | specifies | possible values example 
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Cc) Specifying Graphic Size 


The <IMG> tag supports the HEIGHT and WIDTH attributes, which specify a graphic’s display 
HTML dimensions. The units for these attributes are pixels (short for “picture elements”—abbreviated 
ae “px”), which are the points of light that make up the display on a computer screen. An impor- 
tant feature of the HEIGHT and WIDTH attributes is that they are used to reserve space on the 
page for a graphic, making it unnecessary to adjust the size of the graphic itself. By letting the 
browser know an image’s dimensions before the file finishes downloading, these attributes allow 
the browser to correctly lay out the rest of the page before the graphics appear. You also can sup- 
plement these attributes with the ALT attribute, which allows you to specify text that will appear 
in place of the graphics while they are downloading. @fiæ= Grace wants to add the HEIGHT 
and WIDTH attributes to her page’s images so that users see the intended layout from the 
moment the page opens. She has also created some alternate text to add to each graphic. 


1. In your text editor, locate the <IMG> tag that references the graphic “nomad.gif,” 
then click to the left of the closing > 


QuickTip 2. Press [Spacebar], then type HEIGHT="63" WIDTH="201" ALT="Nomad Ltd" 
You can look up graphic Grace used a graphics-editing program—like Paint, a free accessory included with 
dimensions with Netscape Windows—to look up the exact height and width of the Nomad Ltd logo image. 


Navigator. Click File, click 
Open, then open the graphic 3. Locate the <IMG> tag that references the graphic “tree.jpg,” then click to the left of 


file. The dimensions, in pixels, . 
appear in the title bar. the closing p 

QuickTip 4. Press [Spacebar], then type HEIGHT="468" WIDTH="58" ALT="View through an 
While you can use the evergreen toward a mountainous skyline and blue sky" 
HEIGHT and WIDTH 
attributes to display a 5. Save your work, click the browser program button in the taskbar, then reload 
graphic smaller or larger d-c.h 
than its actual size, image nomad-c.htm 
quality can be significantly Although you may not notice the change in the graphic display, users who view your pub- 
reduced. Instead, you lished page on the Web will see the correct page layout from the start. 


should use a graphics 
program to edit the fileto 6, Click the text editor program button on the taskbar, locate the <IMG> tag that 


EGONAL OA ETIRIRIS: references the graphic “tree.jpg,” then click to the left of the closing > 


7. Press [Spacebar], then type HSPACE="10" 
The HSPACE attribute adds horizontal space between the image and the page elements to 
the left and right of the image. Figure C-4 shows the completed HTML document. 


8. Save your work, click the browser program button in the taskbar, then reload 
Because your images are nomad-c.htm 
already on your local disk, As shown in Figure C-5, the alternate text appears while the images are downloading, and 


they download virtually 
instantaneously. Therefore, 
you may not see the alternate 
text before the graphics 
appear. 


the tree graphic is separated from the text to its right. 


9. Click the text editor program button on the taskbar 


FIGURE C-4: Web page code for sized images 


<BODY> 
<FONT FACE="arial, helvetica, sans serif”> 


Code for ae SRC="images/nomad.gif” ALIGN="left" HEIGHT="63" WIDTH="201" ALT="Nomad 
Nomad logo Ltd"> 
with sizing BRD 


and alternate |cH2 ALIGN=“center"><FONT COLOR="#238E68">Outside Looking 
text attributes }EM>Out</EM></FONT></H2> 


Code for <IMG SRC="images/tree. jpg" ALIGN="“left" HEIGHT="468" WIDTH="58" ALT="“View 
outdoor photo through an evergreen toward a mountainous skyline and blue sky” HSPACE="10"> 


with sizin 
th'sizng, Shop online to get from your desk to the outdoors without wasting time. 
alternate text I BR><BR> 


and horizontal 


space 
attributes 
FIGURE C-5: Web page containing sized images and alternate text 
spa (Nomad Ltd 
graphic Outside Looking Out 
placeholder a a 
boxes Shop online to get from your desk to the outdoors without wasting time. 
Get the tickets, get the gear, and get out there. 
Placeholder 
boxes appear e sporting gear 
while e adventure travel 
graphics are e about Nomad Ltd 
loading 


Need Ideas? Our most popular U.S. destinations: 


1. Sequoia National Park, California 
2. Grand Teton Mountains, Wyoming 
3. Appalachian Trail, East coast 


The clearest way into the Universe is through a forest wilderness. 
-John Muir 
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Cc) Linking Graphics 


Just as you can format sections of text as links, you also can add link formatting to graphics on 

HTML a Web page. You simply surround the <IMG> tag with the <A>..</A> tag pair, and add the 
a HREF attribute. You can use linked images to simplify navigation around your Web site by 
placing an identical linked image at the same location on each page. A user can click this image 
on any page to open the home page. Qf» Grace has created another page for the Nomad 
Ltd Web site describing the tours Nomad offers. Grace has placed the Nomad logo in the 
upper-left corner and wants to link the logo graphic to the home page. When the Web site is 
completed, a user will be able to click the Nomad logo on any page to return to the home page. 


1. In your text editor, open the file HTM C-2.htm, then save it as a text document with 
the filename tours-c.htm 
The source for Grace’s Web page about Nomad tours appears in the text editor. 

2. Locate the <IMG> tag that references the graphic “nomad.gif,” click at the begin- 
ning of the line, type <A HREF="nomad-c.htm">, then press [Enter] 

3. Click in the blank line below the “<IMG>” tag, type </A>, then press [Enter] 
Figure C-6 shows the completed source code for this file. The <IMG> tag for the Nomad 
logo graphic uses extra attributes, which are explained in Table C-3. 

4. Save your work, click the browser program button on the taskbar, open the file 


tours-c.htm in your browser, then move the pointer over the Nomad logo graphic 
The pointer changes to a pointing hand when it is moved over the logo graphic, as shown 
in Figure C-7. This lets users know that a graphic is linked. 


5. Click the Nomad logo in the upper-left corner 
The Nomad home page opens. 


6. Click the text editor program button on the taskbar, then open the file nomad-c.htm 


7. Locate the line beginning with “Get the”, select the filename construction.htm in 
the first <A> tag (before the word “tickets”), press [Delete], then type tours-c.htm 


8. Repeat Step 7 for the filename construction.htm in the second list item (“adventure 
travel”) in the bulleted list (under the <UL> tag) 
Figure C-8 shows the completed Web document. 

9. Save your work, click the browser program button in the taskbar, reload the 
nomad-c.htm page, click the second link in the bulleted list, adventure travel, then 


click the Nomad logo 
The first link opens the Nomad Tours page, and the linked logo graphic reopens the 
home page. 


TABLE C-3: Additional <IMG> attributes 


attribute | specifies | possible values | example 
BORDER the width of an optional border placed around a number representing this width, in pixels; BORDER="0” 
the image; by default, a blue border appears to remove default border, set value to 0 


around a linked graphic 


VSPACE the size of the space between the top and a number representing this space, in pixels VSPACE="5” 
bottom of the graphic, and the surrounding 
page elements; short for “vertical space” 


HSPACE the size of the space between the left and right a number representing this space, in pixels HSPACE="5” 
edges of the graphic, and the surrounding page 
elements; short for “horizontal space” 


FIGURE C-6: Web page code for linked graphic = 


<BODY> 
<A. HREF ="nomad-c.htm"> 


<H2>A i to</H2> 
<H1>Nomad Tours</H1> 


Tag pair formats graphic as a link 


FIGURE C-7: Web page containing linked graphic 


A guide to 


Nomad Ltd offeys a variety of outdoor tours for all types of interests. Our tours fall into 
three main catégories. 


Athlete 


White hand pointer indicates 
graphic is linked 


FIGURE C-8: Web page code containing links to the second page of the Web site 


Shop online to get from your desk to the outdoors without wasting time. 
KBR><BR> 


Get the <A HREF="tours-c.htm">tickets</A>, get the <A 
HREF="“construction.htf">gear</A>, and <B> get out there</B>. 


KBR><BR> 

KUL> 
<LI><A HREF>‘construction.htm">sporting gear</A> I 
<LI><A HR “tours-c. htm" >adventure travel</A> 
<LI><A “construstion.htm">about Nomad Ltd</A> 

</UL> 

Target changed for Target changed in 

first link bulleted list 
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HTML 


To ensure that you select 
all the text in the file, you 
can click Edit, then click 
Select All. 


Some versions of Netscape 
Navigator display ALT text for 
only the first hot spot over 
which the pointer moves. 


Inserting an 
Image Map 


While the ability to link a graphical image to a Web page is a useful tool in Web page design, some- 
times a single graphic conveys information that’s appropriate for more than one link. You can take 
advantage of such an image by making it into an image map, a graphic that has different areas which 
are linked to different Web pages. Each of these areas, known as hot spots, is defined with a coordi- 
nate system that uses the <MAP> and <AREA> tags. The image map information associated with a 
graphic can be located anywhere in a Web document; you specify a name for each map, and use the 
USEMAP attribute to reference the map name in the <IMG> tag that uses it. Because it’s a challeng- 
ing task to specify the exact pixel coordinates of areas within a graphic, most Web designers use soft- 
ware that simplifies image map creation by allowing you to draw the hot spots over the graphic. 
Qf Grace has designed a graphic that shows the locations of popular travel destinations in the 
United States. She also has created an image map for the graphic; the image map splits the image into 
three hot spots. She wants to insert the image map code into the home page she’s creating. 


1. Click the text editor program button on the taskbar, open the file HTM C-3.txt, then 
examine the code in the file 
This file contains the image map information that Grace created. Along with inserting the 
correct values in the <MAP> and <AREA> tags, the software Grace used also generated the 
<IMG> tag for the associated graphic. 


2. Select all the text in the file, press [Ctrl][C] to copy it to the Clipboard, then close 


the file, if necessary 


3. Open the file nomad-c.htm in the text editor, place the insertion point in the blank 
line above the <UL> tag, press [Enter], press [Ctrl][V] to paste the image map code 
from the Clipboard, then press [Enter] 


Figure C-9 shows the completed code for the Web page containing the image map. 


4. Save your work, click the browser program button on the taskbar, then reload the 


nomad-c.htm page 
The image map indicating the locations of popular destinations appears as shown in 
Figure C-10. 


5. Move the pointer over the graphic showing travel destinations 


The text Grace specified for each <AREA> tag’s ALT attribute appears in a box when the 
pointer is over the matching hot spot. In addition to the pointing hand icon, the appearance 
of this text is another cue for the user that this image contains links. 


6. Click the Sequoia National Park hot spot on the image map 
A Sequoia National Park Web page that Grace has begun to create opens. 


7. Click the Nomad logo in the upper-left corner of the browser window 
The logo’s placement and link are consistent with Grace’s site navigation plan, and the 
Nomad home page reopens. 


8. Click the Grand Teton Mountains hot spot to open its link, click the Nomad logo to 
return to the home page, click the Appalachian Trail hot spot, then click the Nomad 


logo to return to the home page 
All three hot spots work as Grace intended. 


HTML code 
for hot spot 
coordinates 


_ ALT= "Grand Teton Mountains"> 


FIGURE C-9: Completed code for Web page containing image map 


<BR><BR> 

Get the <A HREF=“tours-c.htm">tickets</A>, get the <A 
HREF="“construction.htm">gear</A>, and <B> get out there</B>. 
<BR><BR> 


<MAP NAME="parks”™> 
<AREA HREF=“apptrail.htm" SHAPE="poly" COORDS="270, 0, 270, 205, 95, 205, 213, 
0” ALT="Appalachian Trail™> 

<AREA HREF=“sequoia.htm” SHAPE=“poly” COORDS="94, 205, 0, 205, 0, 42, 132; 
137" ALT="Sequoia National Park"> 

<AREA HREF=“teton.htm" SHAPE=“poly” COORDS="212, 0, 132, 136, 42, 71, 42, OÏ 


< /MAP> 


<IMG SRC="images/ideas.gif" WIDTH="270" HEIGHT="205" ALIGN="right" BORDER="0" 
ALT="U.S. map showing locations of popular destinations” USEMAP="#parks” > 


<UL> 


i 


Preformatted 
<IMG> tag 


FIGURE C-10: Web page containing image map 


Nomad.ttd Outside Looking Out 


Shop online to get from your desk to the outdoors without wasting time. 
Get the tickets, get the gear, and get out there. 
¢ sporting gear 


¢ adventure travel 
¢ about Nomad Ltd 


Grand Teton 


Need Ideas? Our most popular U.S. 


destinations: 
Sequoia 
: : ; : National 
1. Sequoia National Park, California Park Appalachian Trail 


2. Grand Teton Mountains, Wyoming 
3. Appalachian Trail, East coast 


TABLE C-4: Image map tags 


tag or tag pair 


The clearest way into the Universe is through a forest wilderness. 


Code for 
Appalachian 
Trail hot spot 


Code for 
Sequoia 
National Park 
hot spot 


Code for 
Grand Teton 
Mountains 
hot spot 


Mountains Image map 
a containing 
three hot 


spots 


| function 


| attribute specifies example 
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If you don’t see the file 
bootbg.jpg listed in the 
images folder, make sure the 
Files of type list box in the 


“All Files” Or “JPEG Files.” 


Open window displays either 2. 


C) Adding a 
am | Background Image 


By default, Web pages appear with the background color set by the user’s computer; that color is 
usually white. HTML allows you to replace the default background with an image, giving you 
access to another design tool. An image that you select for a Web page background needs to con- 
trast well with the page’s text and other elements. Because most Web pages format text in dark 
colors, such as the default of black, it’s best for a background image to be a light color so the page 
remains legible. Additionally, the best background images have uniform color, so that users then 
can read text that appears over any part of the image. Qi» One of Grace’s co-workers in the 
graphic design department gave her a graphic of a pair of hiking boots, which is suitable for use 
as a background image. She decides to add it to the Nomad home page to accent the page’s out- 
door theme. 


a |. 


In your browser, open the file boothg.jpg from the “images” folder 

In addition to HTML documents, Web browsers also can open and display graphic files. The 
boots graphic is light colored, and shows just the outline of the boots. Thus, Web page users 
still will be able to read the text. 


Click the browser’s Back button to return to the Nomad home page, then click the 
text editor program button on the taskbar 


. Place the insertion point in the <BODY> tag, just to the left of the closing > 
. Press [Spacebar], then type BACKGROUND="images/bootbg.jpg" 


Grace references the background image using the BACKGROUND attribute of the 
<BODY> tag, as shown in Figure C-11. 


. save your work, click the browser program button on the taskbar, then reload 


nomad-c.htm 

As Figure C-12 shows, Grace’s small background image repeats, so that it covers the entire 
page. This effect is called tiling because of its similarity to using identical small tiles to cover 
a large area such as a floor. 


. If you have access to a different brand of browser than the one you’ve used to view 


your Web page in this lesson, start that Web browser, and open the file nomad-c.htm 


in the second browser 

Because different browsers interpret some HTML code differently, Grace makes sure she has 
access to the two most popular browsers—Netscape Navigator and Microsoft Internet 
Explorer—and she previews her page in both browsers to ensure that the page appears as 
she intended. 


. Close your browser(s) and text editor 


BACKGROUND 
attribute 
references 
background 
image 


FIGURE C-11: Web page to include the background image 


<HTML> 


<HEAD> 
TLE>Nomad Ltd</TITLE> 
</H 


<BODY BACKGROUND="“images/bootbg. jpg"> 
<FONT FACE=“arial, helvetica, sans serif™> 


<IMG SRC="images/nomad.gif™ ALIGN="left" HEIGHT="63" WIDTH="201" ALT="Nomad 


Ltd"> 


FIGURE C-12: Web page containing tiled background image 


Background 
image is 
tiled to cover 
entire page 
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Exploring 
“lv. | Multimedia Options 


Advances in Web page design have always concentrated on increasing interactivity and making more 
information user-accessible, without increasing a page’s clutter. In addition to adding features to 
HTML, today’s cutting-edge advances toward these goals focus on integrating sound and video with 
a page’s basic text and graphics. The product of this integration is known as multimedia. One obsta- 
cle to multimedia Web sites has been bandwidth, which is the data transfer capacity of a Web user’s 
Internet connection. Because video and audio files have been much larger than HTML and image 
files, the download time for a Web page that included video or audio blocked its smooth integration 
into Web pages. Recently, multimedia has become a reality on the Web as the result of two trends: 
high-bandwidth Internet connections (such as DSL and cable modems), and improved compression 
that shrinks the size of video and audio files. Today you can be certain when you publish a multime- 
dia Web page that many users will experience all of the page’s aspects. Table C-5 summarizes the 
requirements for creating and playing back the main multimedia technologies. @fipæ= Grace has 
not yet planned for any multimedia in her Web site design, and wants to keep her site simple for now. 
However, she decides to learn more about Web multimedia so she'll understand her options as she 
plans for the future of the Nomad Ltd site. Multimedia implementations on the Web include: 


Animated GIF 


The GIF file format for images allows you to combine two or more images into a single file, 
and to include instructions on how the images are presented. Creating such a file, known as an 
animated GIF, was for years the only widely viewable multimedia effect on the Web. Low-cost 
or free software is readily available for creating such effects; one program is shown in 
Figure C-13. The animated GIF is most prevalent in Web page banner advertisements, as it 
allows advertisers to display one or two images to attract a reader’s interest before displaying the 
company logo or other target information. 


A Macromedia Flash animation 
Flash animation is a recently developed multimedia technology, owned by Macromedia Inc. 
Such an animation can be created only with Macromedia’s Flash software, which allows design- 
ers to create complex and highly compressed multimedia animations. Flash animations use an 
image format of higher quality than any of the common Web graphics formats. To experience 
a Flash animation, users must install a small program that works with the browser. Users can 
download this software, called an add-on, from the Web for free. 


A Traditional audio and video 


Recent higher-bandwidth connections and more compressed formats have facilitated the wider 
incorporation of traditional audio and video media into Web sites. Many news organizations, 
such as printed newspapers and television stations, include relevant video clips alongside arti- 
cles on their Web sites; musicians and record companies also use the Web to promote music and 
videos. As shown in Figure C-14, a clip often is embedded as a link, which a user can click to 
view or hear the associated file. Many radio and television stations have added Webcasting to 
their Web sites, meaning that they make their stations normal programming available live on 
their Web sites. This technology also has allowed people and organizations to disseminate video 
and audio media programming without the financial costs of using traditional media channels. 


FIGURE C-13: Animated GIF frames in a creation tool 
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FIGURE C-14: Web site for musical artist with video and audio links 
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TABLE C-5: Comparison of multimedia options 


technology creation tool(s) playback tool 


animated GIF software commonly available, free or at low cost Web browser 
Flash animation Macromedia Flash software Web browser with Flash add-on 
traditional audio and video audio and/or video computer translation hardware, Web browser 


with associated software 
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® Concepts Review | 


Name the function of each section of code indicated in Figure C-15. 
FIGURE C-15 


Match each statement with the term it describes. 


7. A graphic in which different areas are linked to different Web pages a. Broadband 
8. Each linked area in an image map b. Hot spot 
9. A graphic that allows any user to see text in a font selected by the designer c. Pixel 
10. A group of technologies that allows faster downloads d. Image map 
11. One of the points of light that makes up the display on a computer screen e. Text image 


Practice 


Select the best answer from the list of choices. 


12. Which one of the following is a graphics file format commonly used on the Internet? 
a. MP3 
b. JPG 
c. TIFF 
d. BMP 


13. Which one of the following attributes for the <IMG> tag adds space to the left and right of the image? 
a. ALIGN 
b. VSPACE 
Gone 
d. HSPACE 


14. Which one of the following attributes for the <IMG> tag specifies the name of the image file to display? 
a. ALT 
b. VSPACE 
c. SRC 
d. HSPACE 


15. Which one of the following attributes for the <IMG> tag is sometimes used to specify alternate text to 
replace the image? 
a. ALT 
b. VSPACE 
CHSRG 
d. HSPACE 


16. To specify a background image for a Web page, you add an attribute to which tag? 
a. <HTML> 
b. <HEAD> 
c. <BODY> 
d. <IMG> 
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. Which <IMG> attribute(s) do you use to specify a graphic’s display dimensions? 
a. COORDS 
b. SHAPE 
c. HSPACE and VSPACE 
d. HEIGHT and WIDTH 


18. The default measurement unit for image size is 
a. Pixels. 
b. Inches. 
c. Centimeters. 
d. Millimeters. 
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19. Which has long been the only widely viewable multimedia effect on the Web? 
a. JPG graphics 
b. Animated GIFs 
c. Macromedia Flash 
d. Traditional audio and video 


B Skills Review 


1. Insert graphics. 

a. Start your text editor, open the file HTM C-4.htm, then save it as a text document with the filename 
cco-c.htm. 

b. Position the insertion point on the blank line just above the line that starts with “<UL>”, press [Enter], type 
“<IMG SRC="images/glasses.jpg" ALIGN="left">”, then press [Enter]. 

c. Save your work, start your Web browser, then open the file cco-c.htm in your browser. 

d. In your text editor, move the insertion point to the end of the line containing the “<IMG> tag” you inserted, 
press [Enter], type “<BR><BR>”, then press [Enter]. 

e. Move the insertion point to the blank line below the “</UL> tag”, press [Enter], type “<BR><BR>”, then 
press [Enter]. 

f. Save your work. 

g. Reload the page in your browser to verify the graphics. 
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Specify graphic size. 

a. In your text editor, locate the “<IMG>” tag that references the graphic “glasses.jpg”, then move the inser- 
tion point near the end of the line, just to the left of the closing “>”. 

b. Press [Spacebar], then type “HEIGHT="186" WIDTH="250" ALT="Top-quality eyewear"”. 

c. Save your work, then reload the page in your browser. 

d. In your text editor, locate the “<IMG>” tag that references the graphic "glasses.jpg," then move the insertion 
point near the end of the line, just to the left of the closing “>”. 

e. Press [Spacebar], then type “HSPACE="5"”. 

f. Save your work. 

g. Reload the page in your browser. 


ow 


. Link graphics. 
a. In your text editor, open the file HTM C-5.htm, then save it as a text file with the name styles-c.htm. 
b. Locate the “<IMG>” tag that references the graphic “cco.gif”, move the insertion point to the beginning of 
the line, type “<A HREF="cco-c.htm">”, then press [Enter]. 

. Click the blank line after the “<IMG> tag”, type “</A>”, then press [Enter]. 

. Save your work, then view the file styles-c.htm in your browser. 

. Click the Crystal Clear Opticals logo in the upper-left corner. 
In your text editor open the file cco-c.htm. 

. Locate the first list item, Basic Styles in the bulleted list, select the filename “construction.htm” in the first 
<A> tag, press [Delete], then type “styles-c.htm”. 

h. Save your work, reload the file cco-c.htm in your browser, click the first link in the bulleted list, Basic Styles, 

then click the Crystal Clear Opticals logo in the page that opens. 


nn oo aopo 


> HTML C-18 ADDING GRAPHICS AND MULTIMEDIA 


Practice 


4. Insert an image map. 
a. In your text editor, open the file HTM C-6.txt, then examine the code in this file. 
b. Select all the text in the file, press [Ctrl][C] to copy it to the Clipboard, then close the file if necessary. 
c. In your text editor, open the file cco-c.htm, place the insertion point in the blank line above the “<IMG> tag”, 
press [Enter], press [Ctrl][V] to paste the image map code from the Clipboard, then press [Enter]. 
. Move the insertion point near the end of the “<IMG> tag”, just to the left of the closing “>”, press 
[Spacebar], then type “BORDER=“0” USEMAP="#glasses"”. 
e. Save your work, then reload the file cco-c.htm in your browser. 
f. Move the pointer over the graphic showing a pair of glasses. 
g. Click one of the “lenses” hot spots on the image map. 
h. Click the Crystal Clear Opticals logo in the upper-left corner of the browser window to return to the 
home page. 
i. Click anywhere on the “frames” hot spot to open its link, then click the Crystal Clear Opticals logo to return 
to the home page. 
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. Add a background image. 

. In your browser, open the file eggshell.jpg from the “images” folder. 

. Click the browser's Back button to return to the CCO home page, then open the text editor. 

. Place the insertion point in the “<BODY>” tag, just to the left of the closing “>”. 

. Press [Spacebar] then type “BACKGROUND="images/eggshell.jpg"”. 

. Save your work. 
Reload the page in your browser. 

. If you have access to another Web browser besides the one you’ve been using (Netscape Navigator, Microsoft 
Internet Explorer, or others), start that Web browser, and open your Web page in the second browser to verify 
that the elements appear as you intended. 
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. Explore multimedia options. 
a. Review the different types of multimedia described in this unit, then consider how you might incorporate one 
multimedia format into the Crystal Clear Opticals Web page. 
b. Print the Crystal Clear Opticals Web page as it appears in the browser. 
. Sketch the multimedia object’s placement in your printout. 
d. Write a description of the multimedia object you sketched. Include a detailed description of the graphics and/or 
sound it plays, its benefits to the Web page’s design, and its potential drawbacks for the page’s users. 
e. Close and exit your browser(s) and text editor. 


iv) 


> Independent Challenges | 


J. You have been working on a Web page for your consulting business, Star Dot Star. A friend who is studying graphic 
arts has created a logo for you, and gave you a copy in a Web-ready file format. Now you want to add the logo to your 
Web page, along with a background image. 

To complete this independent challenge: 


a. Start your text editor, open the file HTM C-7.htm, then save it as a text document with the filename sds-c.htm. 

b. Insert the file sds.jpg from the images folder above the <H1> text: be sure to specify height (155), width (214), 
alignment, and alternate text (*.*). 

c. Save your work. 

d. Start your Web browser, and preview the Web page in your browser. 
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e. In your text editor, add 10 pixels of horizontal space around the logo graphic. 

f. Use <BR> tags to insert space before and after the headings, so that only the heading text appears to the right 
of the logo graphic in the browser. 

g. If you have access to another Web browser besides the one you've been using (Netscape Navigator, Microsoft 
Internet Explorer, or others), start that Web browser, and open your Web page in the second browser to verity that 
the elements appear as you intended. 


P. In your job with the local water department, Metro Water, you have created a basic Web site that eventually will 
provide information on water resources in your area. Your co-workers in the public relations department have given 
you a copy of the department logo, in GIF format. You also have located an appropriate background image for the 
page; you want to enhance the page’s layout and appearance by adding these graphics. 

To complete this independent challenge: 


a. In your text editor, open the file HTM C-8.htm and save it as mw-c.htm. 

b. Insert the graphic mw.gif from the images folder so it appears in the upper-left corner of the Web page. Be sure 
to include alternate text (water spout), and image dimensions (147 x 147). 

c. Adjust the page layout by adding horizontal space around the image, and inserting line breaks before and after 
the text. The heading text should appear to the right of the graphic, and the rest of the page’s text should appear 
below the graphic. 

d. Add the graphic waterbg.jpg from the images folder as the page’s background. 


us 3. You have begun work on an HTML-based in-store information system at your video store, Film 
&y Í „ Clips. You want to enhance the home page layout by adding graphics. Instead of using text links on the 
kay home page, you also have created a text image from which you want to create an image map. 
= K To complete this independent challenge: 


a. Create a basic Web page for the store. The page should contain the store name and introductory 
information on how to use the Web browser. Save your file as fc-c.htm. Use at least two different text formats. 

. Connect to the Internet, start your Web browser, and use your browser to go to a search engine, such as one of 

the following: 

www.google.com 

www.altavista.com 

www.yahoo.com 

If you have trouble locating a search engine, go to www.course.com, navigate to the page for this book, click the 

link for the Student Online Companion, click the link for this unit, and use the links listed there as a starting 

point for your search. 

Use the search engine to find pages containing free film- or video-related clip art, then download an appropri- 

ate image for your Web page. (Hint: You might use search terms such as “film”, “clip art”, and/or “video”.) 

. Add the image to your Web page, then adjust the page layout if necessary to make the image fit appropriately. If 
possible, be sure to preview the page in different browsers. 

. If you have access to software that allows you to create image maps, use it to map each rectangle on the image 
file “genres.jpg” to the placeholder file “construction.jpg”. Be sure to add appropriate alternate text for each hot 
spot. (Hint: If you have trouble using the software, most programs provide access to a Help system when you 
press [F1] or click Help on the menu bar.) 

. If you created an image map, add it to your Web page, along with the appropriate <IMG> tag for the associated 
graphic file, “genres.jpg”. Test each hot spot on the image map to be sure the link works, and that the alternate 
text appears when the pointer is over the hot spot. If possible, repeat the test in a different browser. 
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Practice 


RY 4. Learning how to create and integrate multimedia into your Web pages is beyond the scope of this 
&y | 7 unit. However, it’s a good practice to become familiar with the features of each technology, and with the 


hay different ways that Web designers are using those features. 
= To complete this independent challenge: 
a.Connect to the Internet, start your Web browser, and use your browser to open one of the 
following pages: 
macromedia.com/showcase (Flash animations) 
www.animfactory.com (animated GIFs) 
www.oneparadigm.com/newspaper.html (traditional audio/video) 
If you have trouble opening these sites, go to www.course.com, navigate to the page for this book, click the link 
for the Student Online Companion, click the link for this unit, and use the links listed there as a starting point 
for your search. 
b. Choose one of the three multimedia formats, and open and examine at least three examples of how it is used. 


If you chose Flash animations or traditional audio/video, complete the following: 

c. For each page you examine, write a paragraph analyzing the multimedia content. Include a description of how it 
was used, how it enhanced the page, how it detracted from the page (if applicable), and how you would change 
or add to the multimedia on each of the pages you find. 


If you chose animated GIF, complete the following: 

d. Write a paragraph analyzing each animation you examine. Include a description of the idea the animation con- 
veyed or its purpose, the context in which it would be useful, how it would enhance a Web page, how it might 
detract from a page, and how you would change or add to the animation for specific applications. 


ADDING GRAPHICS AND MULTIMEDIA HTML C-21- 


_| Practice 


> Visual Workshop 


At your job at Touchstone Booksellers, a small bookstore, you have been talking with the owner about the Rental 
benefits of doing business on the Web. You were excited to recently learn that she has assigned you the task of devel- 
oping the store’s Web site. You have been working on a basic Web page for the store, and want to polish the appear- 
ance of the page by adding graphics. In your text editor, open the file HTM C-9.htm, save it as a text document called 
tsb-c.htm, then edit the file to match the Web page shown in Figure C-16. Use the file eggshell.jpg for the background, 
and book.gif (148 X 148) for the open book image. Be sure to include alternate text for the book image as shown in 
the figure. 


FIGURE C-16 
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